<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="../statics/css/bootstrap.min.css" />
		<script type="text/javascript" src="../statics/js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="../statics/js/bootstrap.min.js"></script>
		<title>保单服务</title>
		<style type="text/css">
			body {
				background: #ffffff;
				margin: 0rem;
				padding: 0rem;
				position: relative;
			}
			
			.container {
				margin: 0rem;
				padding: 0rem;
				width: 100%;
			}
			
			.headera {
				background: #fd3f63;
				height: 12rem;
				text-align: center;
				color: white;
			}
			
			.innera {
				height: 12rem;
				line-height: 7rem;
				font-size: 7rem;
				text-align: center;
			}
			
			.shen1 {
				display: none;
			}
			
			.shen2 {
				display: none;
			}
			
			.imgs {
				margin: 50% auto 0rem auto;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
			#o1{
			     position: absolute;
			     
			}
			#p1{
				margin-left: 6em;
				font-size: 3em;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="col-xs-12 headera">
				<span class="h1" style="line-height: 12rem;font-size: 5rem;">保单列表</span>
			</div>
			<div class="col-xs-12">
				<div class=" col-xs-4 innera" style="border-bottom: 0.5rem solid #fd3f63;" id="innera">
					<span class="h3" style="line-height: 12rem;font-size: 4rem;">生效中</span>
				</div>
				<div class=" col-xs-4 innera" style="border-bottom: 0rem solid #fd3f63;" id="innerb">
					<span class="h3" style="line-height: 12rem;font-size: 4rem;">已过期</span>
				</div>
				<div class=" col-xs-4 innera" style="border-bottom: 0rem solid #fd3f63;" id="innerc">
					<span class="h3" style="line-height: 12rem;font-size: 4rem;">可续保</span>
				</div>
			</div>
			
			<!--生效中-->
			<div class="col-xs-12 shen">

				<div class="col-xs-12 shen">

					<c:if test="${not empty list01}">
						<c:forEach items="${list01}" var="Policy">
					<c:if test="${not empty list}">
						<c:forEach items="${list}" var="insurance">
										<div class="col-xs-12">
											<tr>
												<td><span class="col-xs-2 h2">保&nbsp单&nbsp号</span></td>
												<td><span class="col-xs-5 h2">&nbsp&nbsp&nbsp被&nbsp保&nbsp人&nbsp身&nbsp份&nbsp证&nbsp号</span></td>
												<td><span class="col-xs-2 h2">险&nbsp&nbsp&nbsp&nbsp种</span></td>
												<td><span class="col-xs-3 h2">&nbsp投&nbsp保&nbsp时&nbsp间</span></td>
											</tr>
										</div>

											<tr>
											<td id="o1"><span class="col-xs-2 h3">&nbsp&nbsp&nbsp&nbsp${Policy.policyno}</span></td>
											<td><span class="col-xs-5 h3">&nbsp&nbsp&nbsp&nbsp&nbsp${Policy.identity}</span></td>
											<td><span class="col-xs-2 h3">${insurance.insurancetype}</span></td>
											<td><span class="col-xs-3 h3">&nbsp&nbsp<fmt:formatDate pattern="yyyy-MM-dd" value="${Policy.insure}" /></span></td>
										</tr>
				</c:forEach>	
					</c:if>	
						</c:forEach>	
					</c:if>	
					<c:if test="${empty list01}">
										<img src="../statics/img/whd_img/noPolicy.png" class=" img-responsive imgs" width="500em" />
										<h2 class="h1" style="text-align: center;margin:2rem 0rem;">您还没有购买保险</h2>
										<a href="whd_Insurance" id="p1">立刻购买享受服务</a>
					</c:if>	
				</div>
			</div>
			
			
			
			<!--已过期-->
			<div class="col-xs-12 shen1">

				<div class="col-xs-12 shen1">

					<c:if test="${not empty list02}">
						<c:forEach items="${list02}" var="Policy">
						<c:if test="${not empty list}">
						<c:forEach items="${list}" var="insurance">
										<div class="col-xs-12">
											<tr>
												<td><span class="col-xs-2 h2">保&nbsp单&nbsp号</span></td>
												<td><span class="col-xs-5 h2">&nbsp&nbsp&nbsp被&nbsp保&nbsp人&nbsp身&nbsp份&nbsp证&nbsp号</span></td>
												<td><span class="col-xs-2 h2">险&nbsp&nbsp&nbsp&nbsp种</span></td>
												<td><span class="col-xs-3 h2">&nbsp投&nbsp保&nbsp时&nbsp间</span></td>
											</tr>
										</div>

											<tr>
											<td class="o1"><span class="col-xs-2 h3">&nbsp&nbsp&nbsp&nbsp${Policy.policyno}</span></td>
											<td><span class="col-xs-5 h3">&nbsp&nbsp&nbsp&nbsp&nbsp${Policy.identity}</span></td>
											<td><span class="col-xs-2 h3">${insurance.insurancetype}</span></td>
											<td><span class="col-xs-3 h3">&nbsp&nbsp<fmt:formatDate pattern="yyyy-MM-dd" value="${Policy.insure}" /></span></td>
										</tr>
									
						</c:forEach>	
							</c:if>	
						</c:forEach>	
					</c:if>	
					<c:if test="${empty list02}">
										<img src="../statics/img/whd_img/noPolicy.png" class=" img-responsive imgs" width="500em" />
										<h2 class="h1" style="text-align: center;margin:2rem 0rem;">您还没有购买保险</h2>
										<a href="whd_Insurance" id="p1">立刻购买享受服务</a>
					</c:if>	
				</div>
			</div>
			
			
			
			
			
			<!--可续保-->
			<div class="col-xs-12 shen2">

				<div class="col-xs-12 shen2">
					<c:if test="${not empty list03}">
							<c:forEach items="${list03}" var="Policy">
									<c:if test="${not empty list}">
											<c:forEach items="${list}" var="insurance">
											<div class="col-xs-12">
												<tr>
													<td><span class="col-xs-2 h2">保&nbsp单&nbsp号</span></td>
													<td><span class="col-xs-5 h2">&nbsp&nbsp&nbsp被&nbsp保&nbsp人&nbsp身&nbsp份&nbsp证&nbsp号</span></td>
													<td><span class="col-xs-2 h2">险&nbsp&nbsp&nbsp&nbsp种</span></td>
													<td><span class="col-xs-3 h2">&nbsp投&nbsp保&nbsp时&nbsp间</span></td>
												</tr>
											</div>
											
											<a href="whd_xubao?policyid=${Policy.policyid}">
												<tr>
												<td><div><span class="col-xs-2 h3" style="width: 3rem;" >&nbsp&nbsp&nbsp&nbsp${Policy.policyno}</span></div></td>
												<td><span class="col-xs-5 h3">&nbsp&nbsp&nbsp&nbsp&nbsp${Policy.identity}</span></td>
												<td><span class="col-xs-2 h3">${insurance.insurancetype}</span></td>
												<td><span class="col-xs-3 h3">&nbsp&nbsp<fmt:formatDate pattern="yyyy-MM-dd" value="${Policy.insure}" /></span></td>
												</tr>
											</a>
									</c:forEach>	
								</c:if>	
							</c:forEach>	
						</c:if>	
						<c:if test="${empty list03}">
											<img src="../statics/img/whd_img/noPolicy.png" class=" img-responsive imgs" width="500em" />
											<h2 class="h1" style="text-align: center;margin:2rem 0rem;">您还没有购买保险</h2>
											<a href="whd_Insurance" id="p1">立刻购买享受服务</a>
						</c:if>	
					
				</div>
			</div>


		</div>

		<script type="text/javascript">
			$(function() {
				$("#innera").click(function() {
					$(".shen1").hide();
					$(".shen2").hide();
					$(".shen").show();
					$(this).css("border-bottom", "0.5rem solid #fd3f63");
					$("#innerb").css("border-bottom", "0rem solid #fd3f63");
					$("#innerc").css("border-bottom", "0rem solid #fd3f63");
				});

				$("#innerb").click(function() {

					$(".shen1").show();
					$(".shen2").hide();
					$(".shen").hide();
					$(this).css("border-bottom", "0.5rem solid #fd3f63");
					$("#innera").css("border-bottom", "0rem solid #fd3f63");
					$("#innerc").css("border-bottom", "0rem solid #fd3f63");
				});

				$("#innerc").click(function() {

					$(".shen2").show();
					$(".shen1").hide();
					$(".shen").hide();
					$(this).css("border-bottom", "0.5rem solid #fd3f63");
					$("#innera").css("border-bottom", "0rem solid #fd3f63");
					$("#innerb").css("border-bottom", "0rem solid #fd3f63");
				});
			});
		</script>

	</body>

</html>